<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
    <div class="relative w-full rounded cursor-zoom-in group" :style="{backgroundColor:randomRGB()}"
         @click="onToPinsClick">
      <!--      图片-->
      <img v-lazy class="w-full rounded bg-transparent" :src="data.photo" ref="imgTarget"
           :style="{height:(width/data.photoWidth) * data.photoHeight + 'px'}"/>
      <!--       遮罩层-->
      <div class="hidden opacity-0 w-full  h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-300
           group-hover:opacity-100 xl:block">
        <!--分享-->
        <mine-button class="absolute top-1.5 left-1.5" @click="onShareClick">分享</mine-button>
        <!--点赞-->
        <mine-button class="absolute top-1.5 right-1.5"
                     type="info" icon="heart"
                     iconClass="fill-zinc-900 dark:fill-zinc-200"></mine-button>
        <!--下载-->
        <mine-button class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
                     type="info" icon="download"
                     size="small"
                     iconClass="fill-zinc-900 dark:fill-zinc-200"
                     @click="onDownload"></mine-button>
        <!--全屏-->
        <mine-button class="absolute bottom-1.5 right-1.5 bg-zinc-100/70"
                     type="info" icon="full"
                     size="small"
                     iconClass="fill-zinc-900 dark:fill-zinc-200"
                     @click="onImgFullScreen"></mine-button>
      </div>
    </div>
    <!--      标题-->
    <p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 px-1 ">
      {{ data.title }}
    </p>
    <!--      作者-->
    <div class="flex items-center mt-1 px-1">
      <img v-lazy class="h-2 w-2 rounded-full" :src="data.avatar" alt="">
      <span class="text-sm text-zinc-500 ml-1 ">{{ data.author }}</span>
    </div>
  </div>
</template>

<script setup>
import {randomRGB} from "@/utils/colors";
import {saveAs} from 'file-saver'
import {MineMessage} from "@/libs";
import {useElementBounding, useFullscreen} from "@vueuse/core";
import {computed, ref} from "vue";
import {weiboShare} from "@/utils/share";

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  width: {
    type: Number,
    required: false
  }
})
const emits = defineEmits(['click'])
/**
 * 下载
 */
const onDownload = () => {
  MineMessage('success', '图片开始下载')
  //延迟一段时间，可以有更好的体验
  setTimeout(() => {
    saveAs(props.data.photoDownLink)
  }, 100)
}
/**
 * 生成全屏方法
 */
const imgTarget = ref(null)
const {enter: onImgFullScreen} = useFullscreen(imgTarget)

const {
  x: imgContainerX,
  y: imgContainerY,
  width: imgContainerWidth,
  height: imgContainerHeight
} = useElementBounding(imgTarget)
/**
 * pins跳转记录，记录图片中心点的位置(X | Y 位置 + 宽 | 高的一半)
 */

const imgContainerCenter = computed(() => {
  return {
    translateX: parseInt(imgContainerX.value + imgContainerWidth.value / 2),
    translateY: parseInt(imgContainerY.value + imgContainerHeight.value / 2),
  }
})
/**
 * 进入详情的点击事件
 */
const onToPinsClick = () => {
  emits('click', {
    id: props.data.id,
    location:imgContainerCenter.value
  })
}
const onShareClick = () => {
  weiboShare(props.data.photo,`https://imooc-front.lgdsunday.club/pins/${props.data.id}`)
}
</script>
